<template>
  <div>
    <heads title="预约完成"></heads>
    <div class="nav">
      <div class="complete">
        <img src="https://s1.ax1x.com/2022/10/18/xrmRje.png" alt="" />
        &nbsp;&nbsp;&nbsp;
        <p>会诊预约完成</p>
      </div>
      <div class="completestate">
        <van-steps :active="active">
          <van-step>已提交</van-step>
          <van-step>待分诊</van-step>
          <van-step>待接诊</van-step>
        </van-steps>
      </div>
      <div class="submit">
        <div class="theText">
            <p>预约已经提交，请等待分诊结果。</p>
        </div>
        <div class="butt">
            <button class="action" @click="toView">查看会诊单</button>
            &nbsp;&nbsp;&nbsp;
            <button class="shutDown">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import heads from "@/components/heads/heads.vue";
export default {
  name: "complete",
  components: { heads },
  data() {
    return {
        active: 1,
    };
  },
  methods:{
    toView(){
        this.$router.push({
            path:'/consu'
        })
    }
  }
};
</script>

<style lang="less" scoped>
.nav {
  height: 16.5rem;
  border: 0;
  .complete {
    height: 5.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .completestate {
    width: 98%;
    height: 5.125rem;
    border: 1px solid #ccc;
    margin: 0 auto;
    border-radius: 0.3125rem;
    box-sizing: border-box;
    padding: 10px;
  }
  .submit{
    height: 5.625rem;
    box-sizing: border-box;
    padding: 10px;
    .theText{
        height: 2.4375rem;
        display: flex;
        justify-content: center;
        font-weight: 100;
        font-size: .875rem;
        color: #333333;
    }
  }
  .butt{
    height: 2.4375rem;
    display: flex;
    justify-content: center;
    button{
        width: 8.3125rem;
        border-radius: .3125rem;
        border: 0;
        font-weight: 100;
        font-size: .625rem;
    }
    .action{
            background: #169bd5;
            color: #fff;
        }
    .shutDown{
        background: #f2f2f2;
        
    }
  }
}
</style>